<template>
<view class="page">	  
	<view v-if="isLogin" class="body">
		<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
		<template v-else>
			<template v-if="list.length>0">
				<!-- 项目审核列表 -->
				<template v-if="type==0">
					<view class="sp-list-wrap">
						<navigator :url="'/package_msg/msgDetail/msgDetail?is_read='+item.is_read+'&type=0&id='+item.id+'&pro_id='+item.project_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="title">【项目审批】{{item.title}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class="">查看详情</view>
								<view class="right">
									<view v-if="item.is_read==0" class="f-blue">未处理</view> 
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</navigator>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
				</template>
				
				<!-- 督办列表 -->
				<template v-if="type==1">
					<view class="sp-list-wrap">
						<navigator :url="'/package_msg/msgDetail/msgDetail?type=1&is_read='+item.is_read+'&id='+item.id+'&pro_id='+item.project_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="title">【消息通知】{{item.title}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class="">查看详情</view>
								<view class="right"> 
									<view v-if="item.is_read==0" class="f-blue">未读</view>
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</navigator>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
				</template>
				
				<!-- 回款列表 -->
				<template v-if="type==2">
					<view class="sp-list-wrap">
						<navigator :url="'/package_msg/msgDetail/msgDetail?type=2&is_read='+item.is_read+'&id='+item.id+'&pro_id='+item.project_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="title">【回款通知】{{item.title}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class="">查看详情</view>
								<view class="right"> 
									<view v-if="item.is_read==0" class="f-blue">未读</view>
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</navigator>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
				</template>
				
				<!-- 任务指派 -->
				<template v-if="type==3">
					<view class="sp-list-wrap">
						<navigator :url="'/package_msg/msgDetail/msgDetail?is_read='+item.is_read+'&type=3&id='+item.id+'&pro_id='+item.project_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="title">【<text class="f-wb">任务指派</text>】{{item.title}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class="">查看详情</view>
								<view class="right">
									<view v-if="item.is_read==0" class="f-blue">未处理</view> 
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</navigator>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
				</template>
				
				
				<!-- 通知列表 -->
				<template v-if="type==4">
					<view class="sp-list-wrap">
						<navigator :url="'/package_msg/msgDetail/msgDetail?type=4&is_read='+item.is_read+'&id='+item.id+'&pro_id='+item.project_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="title">【消息通知】{{item.title}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class="">查看详情</view>
								<view class="right"> 
									<view v-if="item.is_read==0" class="f-blue">未读</view>
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</navigator>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
				</template>
				
				<!-- 申请延期 -->
				<template v-if="type==5">
					<view class="sp-list-wrap">
						<navigator :url="'/package_msg/msgDetail/msgDetail?type=5&is_read='+item.is_read+'&id='+item.id+'&pro_id='+item.project_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="title">【申请延期】{{item.title}}</view>
							<view class="content split-line">{{item.content}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="bottom">
								<view class="">查看详情</view>
								<view class="right"> 
									<view v-if="item.is_read==0" class="f-blue">未读</view>
									<view class="iconfont f-grey f-s30">&#xe8d4;</view>
								</view>
							</view>
						</navigator>
						<c-loading :loadingState="loadingState"></c-loading>
					</view>
				</template>
				
				
			</template>			
			<c-empty v-else></c-empty>
		</template> 		
		  
	</view> 
</view>
</template>

<script>
export default{
	name:'list',
	data(){
		return {
			isLogin:true,
			type: '',
			page:1,
			list:[],
			total:0,
			is_read:'',
			loadingState:{
				default:true,
				loading:false,
				completed:false
			}
		}
	},
	async onLoad(params) {  
		this.isLogin = await this.$loginState('check'); 
		this.type=params.type;
		this.is_read=params.is_read;
		if(this.type==0){
			uni.setNavigationBarTitle({
				title:'审批列表'
			})
		}
		if(this.type==1){
			uni.setNavigationBarTitle({
				title:'督办信息列表'
			})
		} 
		if(this.type==2){
			uni.setNavigationBarTitle({
				title:'回款通知'
			})
		} 
		if(this.type==3){
			uni.setNavigationBarTitle({
				title:'任务指派'
			})
		} 
		if(this.type==4){
			uni.setNavigationBarTitle({
				title:'通知列表'
			})
		}
		if(this.type==5){
			uni.setNavigationBarTitle({
				title:'延期申请'
			})
		} 
		if(this.isLogin){ 
			this.getMessageList(); 
		}
		
	},
	mounted() {
		 
	},
	onReachBottom(){
		if(this.loadingState.completed){ 
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++; 
				this.getMessageList(); 
			} 
		}	 
	},
	methods:{
		// 获取消息列表
		async getMessageList(){ 
			let res=await this.$api.user_api.messageList({
				page:this.page, 
				limit:20,
				type:'-1',
				is_read:this.is_read,
				content_type:this.type
			});      
			 console.log(res)
			if(res.data.code==200){ 
				this.loadingState.default=false;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length<res.data.data.count){
					this.loadingState.loading=true;
				}else{
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}
		}, 
		 
		 
	},
	components:{   
	},
	computed:{
		list_update(){
			return this.$store.state.msg_state;
		}
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){
				this.list=[];
				this.page=1;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.getMessageList();
			}
		} 
	}
}
</script>

<style lang="less" scoped> 

	// 审批列表
	.sp-list-wrap{
		padding:20rpx 30rpx;
		.item{
			padding:20rpx 0;
			margin-bottom: 30rpx;
			background: #fff;
			box-shadow: 0 0 10rpx #ddd;
			border-radius: 10rpx;
			.title{
				margin-bottom: 10rpx;
				padding:0 20rpx;  
				font-size: 30rpx;
			}
			.content{
				padding:0 20rpx;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color:#999;
			}
			.time{
				padding:0 15rpx 15rpx;
				text-align: right;
				font-size: 28rpx;
				color:#999;
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:15rpx 20rpx 0;
				border-top: 1rpx solid #eee;
				font-size: 24rpx;
				.right{
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>
